<template>
  <div class="bdTable">
    <el-table :data="tableData" stripe style="width: 100%">
      <!-- 表头-->
      <el-table-column v-if="tableTitle.selection" type="selection" width="55">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableTitle.head"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || 'auto'"
        :show-overflow-tooltip="item.overflow"
      >
        <template slot-scope="scope">
          <span v-if="item.type === 'text'">{{
            item.filter ? item.filter(scope.row) : scope.row[item.prop]
          }}</span>
          <div v-if="item.type === 'switch'">
            <el-switch
                v-model="scope.row[item.prop]"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="item.onChange&& item.onChange($event,scope)"
                >
             </el-switch>
          </div>
          <div v-if="item.type === 'btn'">
            <el-button
              v-for="(btn, index) in item.btn"
              :key="index"
              :type="btn.type"
              size="mini"
              :icon="btn.icon"
              @click="btn.handlerClick($event,scope)"
              >{{ btn.name }}</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/**
 *1、渲染的数据
 *2、表头
 *3、渲染内容自定
 *     -按钮
 *     -图片
 *     -input
 *      -switch
 *      -
 */
export default {
  name: 'bdTable',
  props: {
    // 渲染的数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 表头
    tableTitle: {
      type: [Array, Object],
      require: true
    }
  },
  components: {},
  data () {
    return {}
  },
  methods: {},
  mounted () {},
  watch: {},
  computed: {},
  filters: {}
}
</script>

<style lang='scss' scoped>
</style>
